<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body :before-close="close">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="选择盘点方式">
          <el-radio-group v-model="radio1">
            <el-radio-button label="按库名/库区盘点" />
            <el-radio-button label="按物料型号盘点" />
            <el-radio-button label="动碰盘点" />
            <!-- <el-radio-button label="其他盘点" /> -->
          </el-radio-group>
        </el-form-item>

        <el-form-item v-if="radio1 === '按库名/库区盘点'" label="库位" prop="config_id">
          <el-cascader
            v-model="form.config_id"
            placeholder="请选择库位"
            :options="selectData"
            clearable
            filterable
            :props="{ expandTrigger: 'hover', checkStrictly: true,value:'config_id',label:'name' }"
            style="width: 100%"
          />
        </el-form-item>

        <el-form-item v-if="radio1 === '按物料型号盘点'" label="选择商品范围">
          <el-radio v-model="radio2" label="1">全部商品</el-radio>
          <el-radio v-model="radio2" label="2">部分商品</el-radio>
          <el-cascader
            v-if="radio2 === '2'"
            v-model="form.goods_ids"
            placeholder="请选择商品"
            :options="ShoppingData"
            clearable
            collapse-tags
            :props="{ expandTrigger: 'hover', checkStrictly: true, multiple: true }"
          />
        </el-form-item>

        <el-form-item v-if="radio1 === '动碰盘点'" label="选择时间范围">
          <el-date-picker
            v-model="value"
            type="daterange"
            unlink-panels
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="center"
          />
        </el-form-item>

        <el-form-item v-if="radio1 === '其他盘点'" label="选择项目">
          <el-cascader
            v-model="Qtvalue1"
            :options="Qtoptions"
            style="width: 100%;"
            :props="{ expandTrigger: 'hover', checkStrictly: true }"
            @change="handleChange"
          />
        </el-form-item>
        <el-form-item v-if="radio1 === '其他盘点'" label="选择库位">
          <el-cascader
            v-model="form.config_id"
            placeholder="请选择库位"
            :options="selectData"
            clearable
            filterable
            :props="{ expandTrigger: 'hover', checkStrictly: true, label: 'name', value: 'config_id' }"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item v-if="radio1 === '其他盘点'" label="请选择商品">
          <el-radio v-model="radio2" label="1">全部商品</el-radio>
          <el-radio v-model="radio2" label="2">部分商品</el-radio>
          <el-cascader
            v-if="radio2 === '2'"
            v-model="form.goods_ids"
            placeholder="请选择商品"
            :options="ShoppingData"
            clearable
            collapse-tags
            :props="{ expandTrigger: 'hover', checkStrictly: true, multiple: true, label: 'goods_name', value: 'goods_name' }"
          />
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="form.remarks" type="textarea" placeholder="请输入备注" autocomplete="off" clearable />
        </el-form-item>

        <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">
          <el-col :span="24">
            <el-button type="primary" size="medium" @click="submitForm('form')">{{ title }}</el-button>
            <el-button size="medium" @click="close()">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { inventoryCreate, inventoryUpdate } from '@/api/stock'
import { getLocation } from '@/api/stock'
import { getGoods } from '@/api/product'
import { projectList } from '@/api/storehouse'

export default {
  name: 'AddEdit',
  props: {
    open: {
      type: Boolean
    },
    form: {
      type: Object
    },
    title: {
      type: String
    }
  },
  data() {
    return {
      selectData: [],
      radio1: '按库名/库区盘点',
      radio2: '1',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      ShoppingData: [],
      value: '',
      Qtvalue1: [],
      Qtoptions: [],
      rules: {
        config_id: [
          { required: true, message: '请选择库位', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getLocation()
    this.getGoods()
    this.getProjectList()
  },
  methods: {
    handleChange(selection) {
      console.log(selection)
    },
    getProjectList() {
      projectList().then(response => {
        if (response.code === 10000) {
          this.Qtoptions = JSON.parse(JSON.stringify(response.data))
        }
      })
    },
    /** 初始：查询商品 */
    getGoods() {
      const that = this
      getGoods().then(response => {
        if (response.code === 10000) {
          that.ShoppingData = JSON.parse(JSON.stringify(response.data))
          that.ShoppingData.forEach((item) => {
            item.label = item.goods_name
            item.value = item.goods_name
          })
        }
      })
    },
    /** 查询库位 */
    getLocation() {
      getLocation().then(response => {
        if (response.code === 10000) {
          this.selectData = JSON.parse(JSON.stringify(response.data))
        }
      })
    },
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (that.title === '添加') {
            this.add()
          } else {
            this.edit()
          }
        } else {
          return false
        }
      })
    },
    add() {
      const that = this
      if (that.form.config_id) {
        that.form.config_id = that.form.config_id.pop()
      }
      if (this.radio1 === '按库名/库区盘点') {
        this.form.inventory_type = 0
      } else if (this.radio1 === '按物料型号盘点') {
        this.form.inventory_type = 1
        if (this.radio2 === '1') {
          this.form.is_all_product = 0
        } else {
          this.form.is_all_product = 1
          var arr = []
          this.form.goods_ids.forEach(item => {
            arr.push(item[0])
          })
          this.form.goods_ids = []
          this.ShoppingData.forEach((item) => {
            arr.forEach((item1) => {
              if (item1 === item.goods_name) {
                this.form.goods_ids.push(item.goods_id)
              }
            })
          })
        }
      } else {
        this.form.inventory_type = 2
        // 格式化时间 把this.value[0] 的 Tue Feb 21 2023 16:22:42 GMT+0800 (GMT+08:00) {} 转换成 2023-02-21 16:22:42
        var date = new Date(this.value[0])
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
        this.form.start_datetime = Y + M + D
        var date1 = new Date(this.value[1])
        var Y1 = date1.getFullYear() + '-'
        var M1 = (date1.getMonth() + 1 < 10 ? '0' + (date1.getMonth() + 1) : date1.getMonth() + 1) + '-'
        var D1 = date1.getDate()
        this.form.end_datetime = Y1 + M1 + D1
      }
      // console.log(this.form)
      // return
      inventoryCreate(that.form).then(response => {
        if (response.code === 10000) {
          that.$message.success(response.message)
          that.$parent.getList()
          that.$emit('update:open', false)
        }
      })
    },
    edit() {
      const that = this
      inventoryUpdate(that.form).then(response => {
        if (response.code === 10000) {
          that.$message.success(response.message)
          that.$parent.getList()
          that.$emit('update:open', false)
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    close() {
      this.$emit('update:open', false)
    }
  }
}
</script>

